<%--
  Created by IntelliJ IDEA.
  User: Rainboz
  Date: 2019/10/26
  Time: 8:57
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>图片上传</title>
    <link rel="stylesheet" href="${APP_PATH}/static/bootstrap/css/bootstrap.min.css">
    <style>
        .head {
            background-color: #5bc0de;
        }

        .head_bar {
            height: 50px;
            text-align: center;
        }

        .logo img {
            padding-top: 15px;
        }
        .footer{
            border-top: 1px #8c8c8c;
            width: 100%;
            text-align: center;
            /* Set the fixed height of the footer here */
            height: 50px;
            background-color: #f5f5f5;
        }
        .footer a{
            color: #8a6d3b;
        }
        .api_list{
            float: right;
            margin: 4%;
            font-size: 20px;
        }

    </style>
</head>
<body>
<div class="head">
    <div class="head_bar">
            <span class="logo" style="margin-right: 15px;">
                <img src="${APP_PATH}/static/images/logo-web.png">
			</span>
    </div>
</div>
<div class="container">

    <div class="row clearfix">
        <div class="col-md-12 column">
            <div class="api_list">
                <a href="http://rainboz.top/api/">API 文档 [zTree --  jQuery 树插件]</a>
            </div>
            <form onsubmit="return photoForm()" action="save/upjava" method="post" role="form"
                  enctype="multipart/form-data">
                <div style="padding-top: 20px" class="form-group">
                    <label for="upFile">图片上传</label><input type="file" id="upFile" name="file_adimg"/>
                    <p class="help-block">
                        上传.png .gif .jpg .jpeg 格式的图片文件
                    </p>
                </div>

                <div class="checkbox">
                </div>
                <button type="submit" class="btn btn-primary">上传图片</button>
            </form>
            <table class="table">
                <thead>
                <tr>
                    <th>
                        ID
                    </th>
                    <th>
                        图片名
                    </th>
                    <th>
                        图片路径
                    </th>
                    <th>
                        创建时间
                    </th>
                    <th>
                        修改时间
                    </th>
                </tr>
                </thead>
                <tbody id="photoData">

                </tbody>
                <tfoot>
                <tr>
                    <td colspan="6" align="center">
                        <ul class="pagination">

                        </ul>
                    </td>
                </tr>
                </tfoot>
            </table>
        </div>
    </div>
    <div class="footer">
        © 2018-2019 rainboz.top 版权所有 ICP证：<a href="http://beian.miit.gov.cn/" target="_blank">浙ICP备18032517号-1</a></div>
</div>
<script src="${APP_PATH}/static/jquery/jquery-2.1.1.min.js"></script>
<script src="${APP_PATH}/static/bootstrap/js/bootstrap.min.js"></script>
<script src="${APP_PATH}/static/layer/layer.js"></script>
<script>
    $(function () {
        //加载查询第一页
        pageQuery(1);
    });

    /**
     * 异步分页查询
     */
    function pageQuery(pageNum) {
        var loadingIndex = null;
        var jsonData = {
            "pageNum": pageNum,
            "pageSize": 10
        }
        // if (likeflg) {
        //     //模糊查询
        //     jsonData.queryText = $("#queryText").val();
        // }
        $.ajax({
            url: "${APP_PATH}/getPhotoList",
            type: "post",
            data: jsonData,
            beforeSend: function () {
                loadingIndex = layer.msg('处理中', {icon: 16});

            },
            success: function (result) {
                layer.close(loadingIndex);
                if (result.success) {
                    //局部刷新页面数据
                    var tableContent = "";
                    var pageContent = "";

                    var photoPage = result.data;
                    var photos = photoPage.datas;
                    console.log(result);
                    //表格数据
                    $.each(photos, function (i, photo) {
                        tableContent += '<tr>';
                        tableContent += '<td>';
                        tableContent += '' + (i + 1) + '';
                        tableContent += '</td>';
                        tableContent += '<td>';
                        tableContent += '' + photo.imgName + '';
                        tableContent += '</td>';
                        tableContent += '<td>';
                        tableContent += '<a href="${APP_PATH}' + photo.imgUrl + '">';
                        tableContent += '' + photo.imgUrl + '';
                        tableContent += '</a>';
                        // tableContent += '' + photo.imgUrl + '';
                        tableContent += '</td>';
                        tableContent += '<td>';
                        tableContent += '' + photo.gmtCreate + '';
                        tableContent += '</td>';
                        tableContent += '<td>';
                        tableContent += '' + photo.gmtModified + '';
                        tableContent += '</td>';
                        tableContent += '</tr>';
                    });
                    //页码操作
                    if (pageNum > 1) {
                        pageContent += '<li><a href="#" onclick="pageQuery(' + (pageNum - 1) + ')">上一页</a></li>';
                    }
                    for (var i = 1; i <= photoPage.totalNum; i++) {
                        if (i == pageNum) {
                            pageContent += '<li class="active"><a href="#">' + i + '</a></li>';
                        } else {
                            pageContent += '<li><a href="#" onclick="pageQuery(' + i + ')">' + i + '</a></li>';
                        }
                    }
                    if (pageNum < photoPage.totalNum) {
                        pageContent += '<li><a href="#" onclick="pageQuery(' + (pageNum + 1) + ')">下一页</a></li>';
                    }
                    $("#photoData").html(tableContent);
                    $(".pagination").html(pageContent);
                } else {
                    layer.msg("用户查询分页失败！", {time: 2000, icon: 5, shift: 6}, function () {

                    });
                }
            }
        });
    }

    /**
     * 上传图片:首先要说的就是 ajax 是无法实现上传文件的，可以想一下ajax与后台通信都是通过传递字符串，怎么能传递文件呢？
     * 其实出于安全考虑js是不能操作文件的，所以就不要再说用ajax来实现文件的上传了，这是不可能的。
     */

    /**
     * 判断是否选择文件
     */
    function photoForm() {
        var fileFlag = false;
        $("input[name='file_adimg']").each(function () {
            if ($(this).val() != "") {
                fileFlag = true;
            }
        });
        // alert(fileFlag);
        if (!fileFlag) {
            layer.msg("请选择好文件!", {time: 2000, icon: 5, shift: 6}, function () {

            });
            return false;
        } else {
            $("#photoDataForm").submit();
            return true;
        }
    }
</script>
</body>
</html>
